<script setup>
	import {
		computed,
		onActivated,
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'

	import {
		sendMsgApi,
	} from "@/assets/api/other/memorialHall.js"
	import {
		getInfo2Api,
	} from "@/assets/api/other/recommend.js"
	import {
		navigateBack,
		redirectToMemorialHall,
		navigateToUpToSacrificeSetting,
		navigateToArticle,
		navigateToArticleForm,
	} from "@/assets/scripts/navigate.js"
	import {
		memorialHallApi,
	} from "@/assets/api/other/memorialHall.js"
	import {
		getCommonCheckListApi,
		addCommonCheckListApi,
		delCommonCheckListApi,
		updateCommonCheckListApi,
		delArticleApi,
		uploadApi,
		addArticleApi,
		getArticleApi,
	} from "@/assets/api/other/spaceDetails.js"
	import titleColumn from '@/components/titleColumn.vue'
	import leaveMessageCard from '@/components/leaveMessageCard.vue'
	import articleCard from '@/components/articleCard.vue'
	const meMemorialId = ref('')
	const msgModal = ref()
	const show = ref(false)
	const msgDetail = ref('')
	const articleValue = ref('')
	const userInfo = ref({})
	const showUrl = ref('')
	const articleTitle = ref('')
	const msgInp = ref('')
	const isUploading = ref(true)
	const uploadResUrl = ref('')
	const msgInpHeight = ref(24)
	const dataSource = ref({})
	const msgPopup = ref()
	const articlePopup = ref()
	const uploadPopup = ref()
	const pageCurrent = ref(0)
	const screenWidth = ref(0)
	const currentId = ref('')
	const tabContentData = ref({
		'相册': [],
		'视频': [],
		'留言': [],
		'追忆文章': [],
	})

	const pageTitle = computed(() => tabList[pageCurrent.value] || '追忆空间')
	const tabList = ['简介', '相册', '视频', '留言', '追忆文章']

	const handleUpdateMessage = (id) => {
		currentId.value = id
		const row = tabContentData.value[tabList[pageCurrent.value]].find(o => o.id === id)
		msgInp.value = row.ccContent
		msgPopup.value.open()
	}

	const handleClose = (id) => {
		uni.showModal({
			title: '温馨提示',
			content: '请再次确认是否删除',
			success: async (e) => {
				if (e.confirm) {
					const res = await delCommonCheckListApi(id)
					if (res.code === 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							complete: () => {
								tabContentData_init() // 纪念馆数据

								if (pageCurrent.value == 4) {
									articleList_init() // 文章数据
								}
							}
						})
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'error',
						})
					}
				}
			}
		})
	}

	const handleDelArticle = (id) => {
		uni.showModal({
			title: '温馨提示',
			content: '请再次确认是否删除',
			success: async (e) => {
				if (e.confirm) {
					const res = await delArticleApi(id)
					if (res.code === 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							complete: () => {
								tabContentData_init() // 纪念馆数据

								if (pageCurrent.value == 4) {
									articleList_init() // 文章数据
								}
							}
						})
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'error',
						})
					}
				}
			}
		})
	}

	const handleLookMsg = (item) => {
		msgDetail.value = item.ccContent
		msgModal.value.open()
	}

	const tab_handleClick = (index) => {
		if (index != pageCurrent.value) {
			pageCurrent.value = index
			if (index < 4) {
				tabContentData_init()
			} else {
				articleList_init()
			}
		} else {
			pageCurrent.value = index
		}
	}

	const tabContentData_init = async () => {
		const tab = tabList[pageCurrent.value]
		if (pageCurrent.value == 0 || pageCurrent.value == 4) {
			return
		}
		const res = await getCommonCheckListApi(meMemorialId.value, tab)
		if (res.code === 200) {
			tabContentData.value[tab] = res.rows
		}
	}

	const msgClose_handleClick = () => {
		msgPopup.value.close()
	}

	const articleClose_handleClick = () => {
		articlePopup.value.close()
	}

	const uploadClose_handleClick = () => {
		uploadPopup.value.close()
	}

	const handleUpdateMsg = async () => {
		if (msgInp.value.length == 0) {
			uni.showToast({
				title: '请输入留言内容'
			})
			return
		}
		const row = tabContentData.value[tabList[pageCurrent.value]].find(o => o.id === currentId.value)

		const res = await updateCommonCheckListApi({
			...row,
			ccContent: msgInp.value,
		})
		if (res.code === 200) {
			uni.showToast({
				title: '修改成功',
				icon: 'success',
				complete: () => {
					msgPopup.value.close()
					tabContentData_init()
				}
			})
		} else {
			uni.showToast({
				title: '修改失败',
				icon: 'error',
			})
		}
		msgInp.value = ''
		currentId.value = ''
	}

	const handleSendMsg = async () => {
		if (msgInp.value.length == 0) {
			uni.showToast({
				title: '请输入留言内容'
			})
			return
		}

		const res = await sendMsgApi({
			ccType: '留言',
			ccContent: msgInp.value,
			meMemorialId: meMemorialId.value,
		})
		if (res.code === 200) {
			uni.showToast({
				title: '留言成功',
				icon: 'success',
				complete: () => {
					msgPopup.value.close()
					tabContentData_init()
				}
			})
		}
		msgInp.value = ''
	}

	const handleSetting = () => {
		if (dataSource.value.createBy == userInfo.value.userId || userInfo.value.roles.some(o => o.roleKey ===
				'admin1')) {
			navigateToUpToSacrificeSetting(meMemorialId.value)
		} else {
			uni.showToast({
				title: '权限不足',
				icon: 'error'
			})
		}
	}

	const handleAdd = () => {
		if (pageCurrent.value == 4) {
			if (dataSource.value.createBy == userInfo.value.userId || userInfo.value.roles.some(o => o.roleKey ===
					'admin1')) {
				// uploadResUrl.value = ''
				// articlePopup.value.open()
				navigateToArticleForm(meMemorialId.value)
			} else {
				uni.showToast({
					title: '权限不足',
					icon: 'error'
				})
			}
		} else if (pageCurrent.value == 3) {
			msgPopup.value.open()
		} else if (pageCurrent.value == 1 || pageCurrent.value == 2) {
			if (dataSource.value.createBy == userInfo.value
				.userId || userInfo.value.roles.some(o => o.roleKey === 'admin1')) {
				uploadPopup.value.open()
			} else {
				uni.showToast({
					title: '权限不足',
					icon: 'error'
				})
			}
		}
	}

	const handleUploadSuccess = async (e) => {
		const num = pageCurrent.value == 1 ? 2 : 10
		if (e.tempFiles[0].size > num * 1024 * 1024) {
			uni.showToast({
				title: '上传文件太大',
				icon: 'error'
			})
			return
		}
		isUploading.value = true
		const res = await uploadApi(e.tempFilePaths[0])
		isUploading.value = false
		if (res.code === 200) {
			uni.showToast({
				title: '上传成功',
				icon: 'uccess',
				complete: () => {
					uploadResUrl.value = res.url
				}
			})
		} else {
			uni.showToast({
				title: '上传失败',
				icon: 'error'
			})
		}
	}

	const editorSubmit_handleClick = async () => {
		if (articleTitle.value == '') {
			uni.showToast({
				title: '请检查标题',
				icon: 'error'
			})
			return
		}
		if (articleValue.value == '') {
			uni.showToast({
				title: '请检查内容',
				icon: 'error'
			})
			return
		}
		if (uploadResUrl.value == '') {
			if (isUploading.value == true) {
				uni.showToast({
					title: '图片上传中',
					icon: 'error'
				})
			} else {
				uni.showToast({
					title: '请检查图片',
					icon: 'error'
				})
			}

			return
		}
		const res = await addArticleApi({
			aImg: uploadResUrl.value,
			aText: articleValue.value,
			aTitle: articleTitle.value,
			aType: "追忆文章",
			meMemorialId: meMemorialId.value,
		})
		if (res.code === 200) {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
				complete: () => {
					articleList_init() // 文章数据
					articleTitle.value = ''
					articleValue.value = ''
					uploadResUrl.value = ''
					articlePopup.value.close()
				}
			})
		} else {
			uni.showToast({
				title: '提交失败',
				icon: 'error'
			})
		}
	}

	const uploadSubmit_handleClick = async () => {
		const res = await addCommonCheckListApi({
			meMemorialId: meMemorialId.value,
			ccType: tabList[pageCurrent.value],
			ccTitle: new Date().toLocaleString(),
			ccContent: uploadResUrl.value
		})
		if (res.code === 200) {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
				complete: () => {
					tabContentData_init()
					uploadResUrl.value = ''
					uploadPopup.value.close()
				}
			})
		} else {
			uni.showToast({
				title: '提交失败',
				icon: 'error'
			})
		}
	}

	const editor_hanleInput = (e) => {
		// console.log('==== input :', e)
		articleValue.value = e.html
	}

	const editor_upinImage = async (tempFiles, editorCtx) => {
		// 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
		// console.log(tempFiles, editorCtx);
		const res = await uploadApi(tempFiles[0].path)
		if (res.code !== 200) {
			uni.showToast({
				title: '上传失败',
				icon: 'error'
			})
			return
		}
		editorCtx.insertImage({
			src: res.url,
			width: '80%',
			success: function() {
				uni.showToast({
					title: '上传成功',
					icon: 'success'
				})
			}
		})
	}

	const handleImgClick = (url) => {
		showUrl.value = url
		show.value = true
	}

	onMounted(() => {
		route_init() // 路由参数
		data_init() // 纪念馆数据
		screenWidth_init() // 屏幕宽度初始化
		tabContentData_init() // 纪念馆数据
		userInfo_init() // 用户信息

		if (pageCurrent.value == 4) {
			articleList_init() // 文章数据
		}
	})

	onActivated(() => {
		route_init() // 路由参数
		data_init() // 纪念馆数据
		screenWidth_init() // 屏幕宽度初始化
		tabContentData_init() // 纪念馆数据
		userInfo_init() // 用户信息

		if (pageCurrent.value == 4) {
			articleList_init() // 文章数据
		}
	})

	const route_init = async () => {
		const route = useRoute()
		if (route.query.meMemorialId && route.query.meMemorialId !== 'undefined') {
			meMemorialId.value = route.query.meMemorialId
		}
		if (route.query.pageCurrent && route.query.pageCurrent !== 'undefined') {
			pageCurrent.value = route.query.pageCurrent
		}
	}

	const data_init = async () => {
		const res = await memorialHallApi(meMemorialId.value)
		if (res.code === 200) {
			dataSource.value = res.data
		}
	}

	const screenWidth_init = () => {
		screenWidth.value = uni.getSystemInfoSync().screenWidth
	}

	const articleList_init = async () => {
		const res = await getArticleApi(meMemorialId.value)
		if (res.code === 200) {
			tabContentData.value['追忆文章'] = res.rows
		}
	}

	const userInfo_init = async () => {
		const user = uni.getStorageSync('user')
		const res = await getInfo2Api(user.userId)
		if (res.code === 200) {
			userInfo.value = res.user
			uni.setStorageSync('user', res.user)
		} else {
			uni.showToast({
				title: '获取用户信息失败',
				icon: 'error',
			})
		}
	}
</script>

<template>
	<view class="bg-grey-fill">

		<uv-overlay :show="show" @click="show = false">
			<view class="img-url" @click="show = false">
				<image :src="showUrl" @click="show = false" mode="widthFix" class="image image-fill-x"></image>
			</view>
		</uv-overlay>

		<uv-modal ref="msgModal" title="留言消息" confirmText="关闭">
			<view class="slot-content" style="width: 100%;">
				<scroll-view scroll-y="true" class="msg-scroll-view">
					<!-- <view class='msg' v-html="msgDetail"></view> -->
					<uni-easyinput style="display: block; width: 100%; " :styles="{disableColor:'#333'}" type="textarea"
						disabled v-model="msgDetail" placeholder="输入你对逝者的思念"></uni-easyinput>
				</scroll-view>
			</view>
		</uv-modal>

		<uv-popup ref="msgPopup" mode="bottom">
			<view class="popup">
				<view class="d-flex d-flex-jcsb d-flex-aic px-normal head">
					<view class="font-fs18">
						留言内容
					</view>
					<view class="" @click="msgClose_handleClick">
						关闭
					</view>
				</view>
				<view class="p-normal">
					<!-- :height='msgInpHeight' @focus="msgInpHeight = 70" @blur="msgInpHeight = 24" -->
					<uni-easyinput type="textarea" v-model="msgInp" placeholder="输入你对逝者的思念"></uni-easyinput>
					<uv-button v-if="currentId" @click="handleUpdateMsg" class="mt-normal" type="primary"
						text="修改"></uv-button>
					<uv-button v-else @click="handleSendMsg" class="mt-normal" type="success" text="留言"></uv-button>
				</view>
			</view>
		</uv-popup>

		<uv-popup ref="articlePopup" mode="bottom">
			<view class="popup">
				<view class="d-flex d-flex-jcsb d-flex-aic px-normal head">
					<view class="font-fs18">
						文章内容
					</view>
					<view class="" @click="articleClose_handleClick">
						关闭
					</view>
				</view>
				<view class="p-normal">
					<uv-input placeholder="输入文章标题" border="none" v-model="articleTitle" class="mb-normal inp">
					</uv-input>
					<uni-file-picker file-mediatype="image" limit='1' :auto-upload='false'
						@select="handleUploadSuccess($event)" />
					<view class="text">
						<sp-editor @input="editor_hanleInput" @upinImage="editor_upinImage"></sp-editor>
					</view>
					<uv-button class="mt-normal" type="primary" text="提交" @click="editorSubmit_handleClick"></uv-button>
				</view>
			</view>
		</uv-popup>

		<uv-popup ref="uploadPopup" mode="bottom">
			<view class="popup">
				<view class="d-flex d-flex-jcsb d-flex-aic px-normal head">
					<view class="font-fs18">
						图片/视频上传
					</view>
					<view class="" @click="uploadClose_handleClick">
						关闭
					</view>
				</view>
				<view class="p-normal">
					<view class="tip">
						上传图片/视频大小不能超过2M/10M，超过2M/10M，将会被过滤掉。(注意: 请耐心等待一会儿，出现"上传成功"后再点击提交的按钮)
					</view>
					<uni-file-picker :file-mediatype="pageCurrent==1?'image':'video'" limit='1' :auto-upload='false'
						@select="handleUploadSuccess($event)" />
					<uv-button class="mt-normal" type="primary" text="提交" @click="uploadSubmit_handleClick"></uv-button>
				</view>
			</view>
		</uv-popup>

		<view class="banner">
			<uv-navbar :fixed="false" bgColor="transparent" class="navbar" leftIconColor='#fff'
				:titleStyle="{color:'#fff'}" :title="pageTitle">
				<template v-slot:left>
					<view class="d-flex d-flex-aic" @click="navigateBack">
						<uv-icon name="arrow-left" color="#fff" size="19"></uv-icon>
						<!-- <uv-icon class="ml-small" name="home" color="#fff"
							@click="redirectToMemorialHall(meMemorialId, 1)" size="20"></uv-icon> -->
						返回纪念馆
					</view>
				</template>
			</uv-navbar>
			<image src="@/assets/pic/space-bg.png" mode="widthFix" class="image image-fill-x bg">
			</image>
		</view>
		<view class="px-normal pb-normal main">
			<view class="box">
				<view class="tab-list d-flex d-flex-jcc">
					<view :class="['item', {'con':pageCurrent==index}]" v-for="(item, index) in tabList" :key="index"
						@click="tab_handleClick(index)">
						{{item}}
					</view>
				</view>
			</view>
			<view class="p-normal mt-normal box" v-if="pageCurrent==0">
				<titleColumn :isShowMore="false">
					<template #title>
						<view>人物简介</view>
					</template>
					<template #content>
						<view class="profile">
							<view class="d-flex d-flex-jcsb mb-normal">
								<view class="d-flex-fx1 info">
									<view class="d-flex mb-small">
										逝者姓名： <view class="value">{{dataSource.mmName1}}</view>
									</view>
									<view class="d-flex mb-small">
										逝者性别： <view class="value">{{dataSource.mmSex1 == '0' ? '男' : '女'}}</view>
									</view>
									<view class="d-flex mb-small">
										出生日期： <view class="value">
											<view class="mr-small">
												<span class="lunar"
													v-if="dataSource.mmDate1==='time_type_private'">农</span>
												<span class="gregorian" v-else>公</span>
											</view>
										</view>
										{{dataSource.mmBorn1}}
									</view>
									<view class="d-flex mb-small">
										逝世日期： <view class="value">
											<view class="mr-small">
												<span class="lunar"
													v-if="dataSource.mmDate1==='time_type_private'">农</span>
												<span class="gregorian" v-else>公</span>
											</view>
										</view>
										{{dataSource.mmPassAwayDate1}}
									</view>
								</view>
								<view class="d-flex-fs0 avatar">
									<image :src="dataSource.mmImg1" mode="scaleToFill" class="image image-fill">
									</image>
								</view>
							</view>
							<view class="d-flex d-flex-jcsb" v-if="dataSource.mmType==='mm_type_two'">
								<view class="d-flex-fx1 info">
									<view class="d-flex mb-small">
										逝者姓名： <view class="value">{{dataSource.mmName2}}</view>
									</view>
									<view class="d-flex mb-small">
										逝者性别： <view class="value">{{dataSource.mmSex2 == '0' ? '男' : '女'}}</view>
									</view>
									<view class="d-flex mb-small">
										出生日期： <view class="value">
											<view class="mr-small">
												<span class="lunar"
													v-if="dataSource.mmDate2==='time_type_private'">农</span>
												<span class="gregorian" v-else>公</span>
											</view>
										</view>
										{{dataSource.mmBorn2}}
									</view>
									<view class="d-flex mb-small">
										逝世日期： <view class="value">
											<view class="mr-small">
												<span class="lunar"
													v-if="dataSource.mmDate2==='time_type_private'">农</span>
												<span class="gregorian" v-else>公</span>
											</view>
										</view>
										{{dataSource.mmPassAwayDate2}}
									</view>
								</view>
								<view class="d-flex-fs0 avatar">
									<image :src="dataSource.mmImg2" mode="scaleToFill" class="image image-fill">
									</image>
								</view>
							</view>
							<view class="mt-big" v-if="dataSource.epitaph">
								<view class="">
									墓志铭
								</view>
								<view class="p-small mt-small text">
									{{dataSource.epitaph}}
								</view>
							</view>
							<view class="mt-big" v-if="dataSource.desc">
								<view class="">
									人物简介
								</view>
								<view class="p-small mt-small text">
									{{dataSource.desc}}
								</view>
							</view>
						</view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box" v-if="pageCurrent==1">
				<titleColumn :isShowMore="false">
					<template #title>
						<view>相册[{{tabContentData[tabList[pageCurrent]].length}}]</view>
					</template>
					<template #content>
						<uv-empty mode="list" icon="empty-favor"
							v-if="!tabContentData[tabList[pageCurrent]].length"></uv-empty>
						<!-- <uv-album @longpress="handleImgClick" keyName='ccContent' :multipleSize='(screenWidth - 80) / 3'
							:space='10' :urls="tabContentData[tabList[pageCurrent]]"></uv-album> -->
						<view class="d-flex d-flex-fww album">
							<div class="item" v-for="(item, index) in tabContentData[tabList[pageCurrent]]"
								:key="index">
								<image @click="handleImgClick(item.ccContent)" :src="item.ccContent"
									class="image image-fill-x" mode="widthFix"></image>
								<uv-icon class="close" v-if="dataSource.createBy == userInfo.userId"
									@click='handleClose(item.id)' name="close-circle-fill" color="#2979ff"
									size="28"></uv-icon>
							</div>
						</view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box" v-if="pageCurrent==2">
				<titleColumn :isShowMore="false">
					<template #title>
						<view>视频[{{tabContentData[tabList[pageCurrent]].length}}]</view>
					</template>
					<template #content>
						<uv-empty mode="list" icon="empty-favor"
							v-if="!tabContentData[tabList[pageCurrent]].length"></uv-empty>
						<view class="videoList">
							<view v-for="(item, index) in tabContentData[tabList[pageCurrent]]" :key="index"
								class="item">
								<view class="video-box">
									<video class="video" :src="item.ccContent" controls>
									</video>
								</view>
								<view class="text">
									{{item.ccTitle}}
								</view>
								<view class="px-normal mt-normal" v-if="dataSource.createBy == userInfo.userId">
									<uv-button @click="handleClose(item.id)" type="warning" text="删除该条视频"></uv-button>
								</view>
							</view>
						</view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box" v-if="pageCurrent==3">
				<titleColumn :isShowMore="false">
					<template #title>
						<view>留言[{{tabContentData[tabList[pageCurrent]].length}}]</view>
					</template>
					<template #content>
						<uv-empty mode="list" icon="empty-favor"
							v-if="!tabContentData[tabList[pageCurrent]].length"></uv-empty>
						<view class="item" v-for="(item, index) in tabContentData[tabList[pageCurrent]]" :key="index"
							@click="handleLookMsg(item)">
							<leaveMessageCard @onUpdate='handleUpdateMessage(item.id)'
								:isShowEdit='dataSource.createBy == userInfo.userId'
								:isShowDel='dataSource.createBy == userInfo.userId' @onDelete='handleClose(item.id)'
								:data="item">
							</leaveMessageCard>
						</view>
					</template>
				</titleColumn>
			</view>

			<view class="p-normal mt-normal box" v-if="pageCurrent==4">
				<titleColumn :isShowMore="false">
					<template #title>
						<view>文章[{{tabContentData[tabList[pageCurrent]].length}}]</view>
					</template>
					<template #content>
						<uv-empty mode="list" icon="empty-favor"
							v-if="!tabContentData[tabList[pageCurrent]].length"></uv-empty>
						<view class="article-list">
							<view class="mb-normal item" v-for="(item, index) in tabContentData[tabList[pageCurrent]]"
								:key="index">

								<articleCard @click="navigateToArticle(item.id)" :data="item"
									style="border-bottom-width: 0;">
								</articleCard>
								<view class="px-normal mt-normal" v-if="dataSource.createBy == userInfo.userId">
									<uv-button @click="handleDelArticle(item.id)" type="warning"
										text="删除该条文章"></uv-button>
								</view>
								<!-- <view class="text-ellipsis-2 font-fs20 title">
									{{item.aTitle}}
								</view>
								<view class="font-fs12 mt-small d-flex d-flex-aic time">
									<uv-icon class="mr-small" name="clock-fill" color="#666666"></uv-icon>
									{{item.createTime}}
								</view>
								<view v-html="item.aText" class="mt-normal text-ellipsis-2 font-fs14 content">
								</view> -->
							</view>
						</view>
					</template>
				</titleColumn>
			</view>

		</view>

		<view class="px-normal submit-btn" v-if="pageCurrent!=0">
			<uv-button @click="handleAdd" type="success" :text="'添加/新增'+tabList[pageCurrent]"
				color="#12b886"></uv-button>
		</view>

		<view class="px-normal submit-btn" v-if="pageCurrent==0">
			<uv-button @click="handleSetting" type="success" text="设置/修改纪念馆" color="#12b886"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.img-url {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow-y: scroll;
	}

	.album {
		.item {
			width: calc((100vw - 80px) / 3);
			height: calc((100vw - 80px) / 3);
			margin-right: 10px;
			margin-top: 10px;
			border-radius: 8px;
			overflow: hidden;
			position: relative;

			&:nth-of-type(3n) {
				margin-right: 0;
			}

			&:nth-of-type(-n + 3) {
				margin-top: 0;
			}

			.close {
				position: absolute;
				top: 4px;
				right: 4px;
			}
		}
	}

	.popup {
		.head {
			background-color: #1ab752;
			color: #fff;
			height: 40px;
		}

		.tip {
			padding: 10px;
			background-color: #f2f2f2;
			margin-bottom: 10px;
			text-indent: 2em;
		}

		.text {
			height: 200px;
			overflow: scroll;
		}

		.inp {
			background-color: #f0efed;
			padding: 5px 10px !important;
		}
	}

	.submit-btn {
		position: fixed;
		bottom: 5px;
		left: 0;
		right: 0;
		z-index: 10;
	}

	.banner {
		position: relative;
		height: 230px;

		.navbar {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
			color: #fff;
		}

		.bg {
			height: 265px;
		}


	}

	.main {
		background-color: transparent;
		position: relative;
		z-index: 10;
		padding-bottom: 55px;

		&::before {
			content: "";
			position: absolute;
			top: 25px;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 10px 10px 0 0;
			background-color: #f5f5f5;
			z-index: -1;
		}

		.box {
			border-radius: 10px;
			box-shadow: 0 0 13px 1px #bcbbc77a;
			background-color: #fff;
		}

		.tab-list {
			padding: 20px;

			.item {
				padding: 0 10px;
				height: 24px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #303144;
				background: #f8f8f8;
				margin: 0 5px;
				font-size: 14px;
				white-space: nowrap;
				border-radius: 4px;

				&.con {
					background: linear-gradient(45deg, #fc8150, #e72426);
					color: #fff;
				}
			}
		}

		.profile {
			.avatar {
				width: 80px;
				height: 110px;
			}

			.info {

				.lunar,
				.gregorian {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 18px;
					width: 18px;
					border-radius: 50%;
					border: 1px solid #000;
					color: #fff;
					font-size: 12px;

					&.lunar {
						background-color: #cb8112;
					}

					&.gregorian {
						background-color: #4e6ef2;
					}
				}
			}

			.text {
				color: #49484a;
				background-color: #fef0f0;
			}

		}

		.videoList {

			.item {
				padding: 15px;
				border-radius: 15px;
				margin-bottom: 10px;
				background-color: #f5f5f5;

				.video-box {
					width: 100%;
					border-radius: 15px;
					overflow: hidden;

					.video {
						width: 100%;
					}
				}

				.text {
					width: max-content;
					margin: auto;
					height: 30px;
					line-height: 30px;
					border-bottom: 1px solid #333;
				}
			}
		}

		.article-list {
			.item {
				background-color: #f6f6f6;
				border-radius: 8px;
				overflow: hidden;

				.title {
					color: #303133;
				}

				.time {
					color: #666666;
				}

				.content {
					color: #666666;
				}
			}
		}
	}
</style>